{% extends "../admin/ext_admin.html" %}
{% import "../cmswing/forms.html" as forms %}
{%set extConfig = controller.extConfig%}
{% block extadmin %}
<section class="panel panel-default">
    <header class="panel-heading text-right bg-light  clearfix">
        <ul class="nav nav-tabs pull-left">
            {%for v in extConfig.setting%}
            {%set index = loop.index%}
            {% for ingredient, amount in v %}
            <li class="{{'active' if index==1}}"><a href="#setting{{index}}" data-toggle="tab"><i
                    class="fa fa-cog text-muted"></i> {{ingredient}}</a></li>
            {% endfor %}
            {%endfor%}
        </ul>
        <span class="hidden-sm"><a href="/{{ctx.controller}}/index" class="text-info " data-toggle="ajaxModal">自定义按钮</a></span>
    </header>


    <div class="panel-body">
        <form action="/{{ctx.controller}}/setting" class="form-horizontal" method="post" data-validate="parsley">
            <div class="tab-content">
                {%for v in extConfig.setting%}
                {%set index = loop.index%}
                {% for ingredient, amount in v %}
                <div class="tab-pane fade {{'active in' if index==1}}" id="setting{{index}}">
                    {%for input in amount%}
                    {%if input.type == 'text'%}
                    {{forms.text(setting,label= input.label, name= input.name, value=input.value, html= input.html)}}
                    {%elif input.type == 'pass'%}
                    {{forms.pass(setting,label= input.label, name= input.name, value=input.value, html= input.html)}}
                    {%elif input.type == 'radio'%}
                    {{forms.radio(setting,label=input.label, name=input.name, value=input.value,
                    options=input.options,html=input.html)}}
                    {%elif input.type == 'select'%}
                    {{forms.select(setting,label=input.label, name= input.name, value=input.value,
                    options=input.options,html=input.html)}}
                    {%elif input.type == 'textarea'%}
                    {{forms.textarea(setting,label= input.label, name= input.name, value=input.value, html=
                    input.html)}}
                    {%elif input.type == 'pic'%}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">{{label}}</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-md-10">
                                    <input type="hidden" name="{{input.name}}" id="cover_id_{{input.name}}"
                                           value="{{setting[input.name]}}"/>
                                    <div id="fileList_{{input.name}}" class="uploader-list pull-left"
                                         style="width: auto">
                                        <div id="{{input.name}}" class="file-item thumbnail ">
                                            <img src="{{setting[input.name]|get_pic('')}}">
                                        </div>
                                    </div>
                                    <div id="">

                                    </div>
                                    <div id="filePicker_{{input.name}}" class="pull-left">选择图片</div>
                                </div>
                                <div class="col-md-12">
                                    <span class="help-block m-b-none text-muted"><i class="fa fa-code"></i> <code>this.config('ext.{{setting.ext}}.{{input.name}}')</code></span>
                                    {%if html%}
                                    <span class="help-block m-b-none text-muted"><i
                                            class="fa fa-info-circle text-info"></i>  {{html|safe}}</span>
                                    {%endif%}
                                </div>
                            </div>
                        </div>
                    </div>
                    <script src="/static/admin/js/jquery.min.js"></script>
                    <script src="/static/admin/js/webuploader/webuploader.js" type="text/javascript"></script>
                    <script type="text/javascript">
                      //上传图片
                      (function images_list(i) {
                        var $list = $('#fileList_{{input.name}}');
                          // 优化retina, 在retina下这个值是2
                        var  ratio = window.devicePixelRatio || 1;
                          // 缩略图大小
                        var  thumbnailWidth = 100 * ratio;
                        var  thumbnailHeight = 100 * ratio;
                        // 初始化Web Uploader
                        var uploader = WebUploader.create({
                          // 选完文件后，是否自动上传。
                          auto: true,
                          // swf文件路径
                          swf: '/static/admin/js/webuploader/Uploader.swf',
                          // 文件接收服务端。
                          server: '/ext/attachment/adminfile/uploadpic?type={{setting.ext}}',
                          // 选择文件的按钮。可选。
                          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                          pick: {
                            id: '#filePicker_{{input.name}}',
                            multiple: false
                          },
                          // 只允许选择图片文件。
                          accept: {
                            title: 'Images',
                            extensions: 'jpg,jpeg,bmp,png',
                            mimeTypes: 'image/*'
                          }
                        });
                        // 当有文件添加进来的时候
                        uploader.on('fileQueued', function (file) {
                          var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                            ),
                            $img = $li.find('img');

                          $list.html($li);

                          // 创建缩略图
                          uploader.makeThumb(file, function (error, src) {
                            if (error) {
                              $img.replaceWith('<span>不能预览</span>');
                              return;
                            }

                            $img.attr('src', src);
                          }, thumbnailWidth, thumbnailHeight);
                        });

                        // 文件上传过程中创建进度条实时显示。
                        uploader.on('uploadProgress', function (file, percentage) {

                          var $li = $('#' + file.id),
                            $percent = $li.find('.progress span');

                          // 避免重复创建
                          if (!$percent.length) {
                            $percent = $('<p class="progress"><span></span></p>')
                              .appendTo($li)
                              .find('span');
                          }

                          $percent.css('width', percentage * 100 + '%');
                        });

                        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                        uploader.on('uploadSuccess', function (file, res) {
                          $('#' + file.id).addClass('upload-state-done');
                          $('#cover_id_{{input.name}}').val(res);
                        });

                        // 文件上传失败，现实上传出错。
                        uploader.on('uploadError', function (file) {
                          var $li = $('#' + file.id),
                            $error = $li.find('div.error');

                          // 避免重复创建
                          if (!$error.length) {
                            $error = $('<div class="error"></div>').appendTo($li);
                          }

                          $error.text('上传失败');
                        });

                        // 完成上传完了，成功或者失败，先删除进度条。
                        uploader.on('uploadComplete', function (file) {
                          $('#' + file.id).find('.progress').remove();
                        });
                      })()
                    </script>

                    {%endif%}
                    {%endfor%}
                </div>
                {% endfor %}
                {%endfor%}
            </div>
            <div class="form-group form-submit">
                <div class="col-sm-4 col-sm-offset-2">
                    <input type="hidden" name="ext" value="{{controller.ext.ext}}"/>
                    <button type="submit" target-form="form-horizontal"
                            class="btn btn-primary ajax-post">保存
                    </button>
                    <button type="submit" class="btn btn-default"
                            onclick="javascript:history.back(-1);return false;">返回
                    </button>
                </div>
            </div>
        </form>
    </div>


</section>

{% endblock %}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/static/admin/js/webuploader/webuploader.css" type="text/css">
    <style type="text/css">
        .tab-content > .tab-pane{
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
            display: block;
        }
        .tab-content > .active {
            position:static !important;
            clip: inherit; /* IE6, IE7 */
            clip:inherit;
            display: block;
        }
    </style>
{% endblock%}
{% block script%}
{{ super() }}
<script src="/static/admin/js/parsley/parsley.min.js"></script>
<script src="/static/admin/js/parsley/parsley.extend.js"></script>
{% endblock%}